import React, { Component, Suspense } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import { Row, Form, Spin, Col, Card } from 'antd';
import styles from './index.less';
import jqr from '@/assets/OverviewRobots/jqr.png';
const FormItem = Form.Item;
class OverViewAnalysis extends Component {
    state = {
        login: false,
        apiNums: 0,
        diaSimilarQaNums: 0,
        dialogIntenNums: 0,
        dialogNums: 0,
        dictNums: 0,
        similarQaNums: 0,
        slotNums: 0,
        standardQaNums: 0,
    };

    componentDidMount() {
        const { dispatch, currentUser: { robotId } } = this.props;
        let param = { robotId };
        this.reqRef = requestAnimationFrame(() => {
            dispatch({
                type: 'overViewAnalysis/getData',
                payload: param,
                callback: res => {
                    this.setState({
                        ...res
                    })
                }
            })
        })

    }


    render() {
        const { dialogNums, dialogIntenNums, standardQaNums, similarQaNums,
            diaSimilarQaNums, dictNums, slotNums, apiNums } = this.state;
        return (
            <div className={styles.dabj}>
                <Spin spinning={this.state.login}>
                    <Row>
                        <p style={{ marginLeft: 20, marginTop: 10 }} className="titleA">
                            总览
                        </p>
                    </Row>
                    <Row gutter={24} type='flex' style={{ marginTop: 10 }}>
                        <Card className={styles.box}>
                            <div className={styles.cardNum}><span>{dialogNums}</span></div>
                            <div className={styles.cardTitle}><span>多轮场景数量</span></div>
                        </Card>
                        <Card className={styles.box}>
                            <div className={styles.cardNum}><span>{dialogIntenNums}</span></div>
                            <div className={styles.cardTitle}><span>意图数量</span></div>
                        </Card>
                        <Card className={styles.box}>
                            <div className={styles.cardNum}><span>{standardQaNums}</span></div>
                            <div className={styles.cardTitle}><span>知识点数量</span></div>
                        </Card>
                        <Card className={styles.box}>
                            <div className={styles.cardNum}><span>{dictNums}</span></div>
                            <div className={styles.cardTitle}><span>实体数量</span></div>
                        </Card>
                        <Card className={styles.box}>
                            <div className={styles.cardNum}><span>{diaSimilarQaNums}</span></div>
                            <div className={styles.cardTitle}><span>意图相似问数量</span></div>
                        </Card>
                        <Card className={styles.box}>
                            <div className={styles.cardNum}><span>{similarQaNums}</span></div>
                            <div className={styles.cardTitle}><span>知识点相似问数量</span></div>
                        </Card>
                        <Card className={styles.box}>
                            <div className={styles.cardNum}><span>{slotNums}</span></div>
                            <div className={styles.cardTitle}><span>词槽数量</span></div>
                        </Card>
                        <Card className={styles.box}>
                            <div className={styles.cardNum}><span>{apiNums}</span></div>
                            <div className={styles.cardTitle}><span>接口数量</span></div>
                        </Card>
                    </Row>

                </Spin>
            </div>
        );
    }
}

export default connect(({ user }) => ({
    currentUser: user.currentUser,
}))(Form.create()(OverViewAnalysis));
